<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-dv-page/Page.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-$ui_dv_my-dv-bar.html">$ui/dv/my-dv-bar</a></li><li><a href="module-$ui_dv_my-dv-box.html">$ui/dv/my-dv-box</a></li><li><a href="module-$ui_dv_my-dv-fill.html">$ui/dv/my-dv-fill</a></li><li><a href="module-$ui_dv_my-dv-geo.html">$ui/dv/my-dv-geo</a></li><li><a href="module-$ui_dv_my-dv-icon.html">$ui/dv/my-dv-icon</a></li><li><a href="module-$ui_dv_my-dv-indicator.html">$ui/dv/my-dv-indicator</a></li><li><a href="module-$ui_dv_my-dv-line.html">$ui/dv/my-dv-line</a></li><li><a href="module-$ui_dv_my-dv-loading.html">$ui/dv/my-dv-loading</a></li><li><a href="module-$ui_dv_my-dv-page.html">$ui/dv/my-dv-page</a></li><li><a href="module-$ui_dv_my-dv-pictorial.html">$ui/dv/my-dv-pictorial</a></li><li><a href="module-$ui_dv_my-dv-pie.html">$ui/dv/my-dv-pie</a></li><li><a href="module-$ui_dv_my-dv-progress.html">$ui/dv/my-dv-progress</a></li><li><a href="module-$ui_dv_my-dv-radar.html">$ui/dv/my-dv-radar</a></li><li><a href="module-$ui_dv_my-dv-rank.html">$ui/dv/my-dv-rank</a></li><li><a href="module-$ui_dv_my-dv-ring.html">$ui/dv/my-dv-ring</a></li><li></li><li><a href="module-$ui_dv_my-dv-screen.html">$ui/dv/my-dv-screen</a></li><li><a href="module-$ui_dv_my-dv-starry.html">$ui/dv/my-dv-starry</a></li><li><a href="module-$ui_dv_my-dv-text.html">$ui/dv/my-dv-text</a></li><li><a href="module-$ui_dv_my-dv-title.html">$ui/dv/my-dv-title</a></li></ul><h3>Global</h3><ul><li><a href="global.html#darken">darken</a></li><li><a href="global.html#fade">fade</a></li><li><a href="global.html#getCircleRadianPoint">getCircleRadianPoint</a></li><li><a href="global.html#getColorByKeyword">getColorByKeyword</a></li><li><a href="global.html#getColorFromRgbValue">getColorFromRgbValue</a></li><li><a href="global.html#getOpacity">getOpacity</a></li><li><a href="global.html#getRgbaValue">getRgbaValue</a></li><li><a href="global.html#getRgbValue">getRgbValue</a></li><li><a href="global.html#getRgbValueFromHex">getRgbValueFromHex</a></li><li><a href="global.html#getRgbValueFromRgb">getRgbValueFromRgb</a></li><li><a href="global.html#lighten">lighten</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#toHex">toHex</a></li><li><a href="global.html#toRgb">toRgb</a></li><li><a href="global.html#validator">validator</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-dv-page/Page.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div class="my-dv-page" :style="styles">
    &lt;slot>&lt;/slot>
    &lt;div v-if="fullscreen" class="my-dv-page__fullscreen">
      &lt;i v-if="isFullScreen" class="el-icon-switch-button" title="取消全屏" @click="exitFullScreen">&lt;/i>
      &lt;i v-else class="el-icon-full-screen" title="全屏" @click="fullScreen">&lt;/i>
    &lt;/div>
  &lt;/div>
&lt;/template>

&lt;script>
  /**
   * 页面组件
   * @module $ui/dv/my-dv-page
   */
  import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event'
  import {addClass, removeClass} from 'element-ui/lib/utils/dom'
  import {debounce} from '$ui/utils/util';
  import Config from '../../mixins/Config'
  import {fullScreen, exitFullScreen, isFullScreen} from '$ui/utils/bom'

  const WRAPPER_CLASS_NAME = 'my-dv-page__wrapper'
  export default {
    name: 'MyDvPage',
    mixins: [Config],
    provide() {
      return {
        page: this
      }
    },
    /**
     * 属性参数
     * @member props
     * @property {Boolean} [lock] 缩放锁定比例
     * @property {Boolean}  [scale=true] 开启自动缩放
     * @property {Number} [width=1920] 原始宽度
     * @property {Number} [height=1080] 原始高度
     * @property {Number} [activeIndex] 初始展示的场景索引，有MyDvScreen子组件才有效
     * @property {string|function} [target=body] 页面的参照目标元素，默认是body，支持css选择器，有一个特殊值parent取组件的父节点
     * @property {object} [config] 页面配置对象 {color, textColor, fill, colors} ，提供给子组件调用
     * @property {boolean} [fit] 自动适应父容器尺寸，设置后 width height 的参数失效
     * @property {boolean} [fullscreen] 显示全屏切换按钮
     */
    props: {
      lock: {
        type: Boolean
      },
      scale: {
        type: Boolean,
        default: true
      },
      width: {
        type: Number,
        default: 1920,
        validator(val) {
          return val > 0
        }
      },
      height: {
        type: Number,
        default: 1080,
        validator(val) {
          return val > 0
        }
      },
      activeIndex: {
        type: Number,
        default: 0
      },
      target: {
        type: [String, HTMLElement, Function],
        default() {
          return document.body
        }
      },
      fit: Boolean,
      fullscreen: Boolean
    },
    data() {
      return {
        screens: [],
        screenActiveIndex: this.activeIndex,
        widthScale: 1,
        heightScale: 1,
        isFullScreen: false
      }
    },
    watch: {
      $props: {
        deep: true,
        immediate: true,
        handler() {
          this.resize()
        }
      },
      activeIndex: {
        immediate: true,
        handler(val) {
          this.screenActiveIndex = val
        }
      }
    },
    computed: {
      styles() {
        return this.fit
          ? {
            width: '100%',
            height: '100%'
          }
          : {
            width: `${this.width}px`,
            height: `${this.height}px`,
            transform: `scaleX(${this.widthScale}) scaleY(${this.heightScale})`
          }
      }
    },
    methods: {
      getTarget() {
        let target
        switch (typeof this.target) {
          case 'string':
            target = this.target === 'parent'
              ? this.$el.parentNode
              : document.querySelector(this.target)
            break
          case 'function':
            target = this.target()
            break
          default:
            target = this.target
            break
        }
        return target || document.body
      },
      resize() {
        if (!this.scale || this.fit) {
          this.widthScale = 1
          this.heightScale = 1
          return
        }
        const {clientWidth, clientHeight} = this.warpper || {}
        if (!clientWidth || !clientHeight) return
        if (this.lock) {
          this.heightScale = this.widthScale = clientWidth / this.width
        } else {
          this.widthScale = clientWidth / this.width
          this.heightScale = clientHeight / this.height
        }

      },
      fullScreen() {
        const el = this.getTarget()
        fullScreen(el)
        this.isFullScreen = true
      },
      exitFullScreen() {
        exitFullScreen()
        this.isFullScreen = false
      }
    },
    mounted() {
      this.warpper = this.getTarget()
      addClass(this.warpper, WRAPPER_CLASS_NAME + this._uid)
      this.proxyResize = debounce(this.resize, 100)
      addResizeListener(this.warpper, this.proxyResize)
      this.resize()
      this.isFullScreen = this.fullscreen ? isFullScreen() : false
    },
    beforeDestroy() {
      this.proxyResize &amp;&amp; removeResizeListener(this.warpper, this.proxyResize)
      removeClass(this.warpper, WRAPPER_CLASS_NAME + this._uid)
    }

  }
&lt;/script>

&lt;style lang="scss">
  @import "../../style/vars";

  @include b(dv-page) {
    position: relative;
    background-image: $--dv-background-image;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform-origin: 0 0;
    color: $--dv-font-color;
    font-size: 16px;

    @include e(wrapper) {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: $--dv-background;

      .my-master-app {
        overflow: hidden;
      }
    }

    @include e(fullscreen) {
      position: absolute;
      z-index: 9999;
      top: 5px;
      right: 6px;
      background: $--dv-text-placeholder;
      padding: 1px 4px;
      border-radius: 3px;
      color: $--dv-text-secondary;
      opacity: 0.4;
      cursor: pointer;
      &amp;:hover {
        opacity: 0.8;
      }
    }
  }


  body[class*="my-dv-page__wrapper"],
  div[class*="my-dv-page__wrapper"] {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: $--dv-background;

    .my-master-app {
      overflow: hidden;
    }
  }
&lt;/style>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Nov 17 2020 17:07:28 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
